<template>
  <div class="file-list-container">
    <div class="file-list-head">
      <el-input v-model="filename" size="mini" />
      <i class="iconfont icon-sousuo" @click="search" />
      <i class="iconfont icon-import-form" />
    </div>
    <div class="folder">
      <i class="iconfont icon-folderOpen" />
      <span>最近</span>
    </div>
    <div v-infinite-scroll="load" class="file-list">
      <div
        v-for="(item, index) in fileList"
        :key="index"
        class="item"
        :class="{ active: filePath === item.path }"
        @click="$emit('fileChange', item.path)"
      >
        <i class="iconfont icon-pdf" />
        {{ item.title }}

        <i
          class="iconfont icon-shanchu"
          @click.stop.capture="deleteFile(item)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { fetchData } from "@/utils";
import { getfilelist, deletefile } from "@/api/file";
export default {
  name: "FileList",
  props: {
    filePath: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      pagenum: 0,
      pages: 0,
      fileList: [],

      filename: "",
      cacheFilter: { filename: "" }, // 缓存搜索关键词，避免搜索后，手动删除关键词，导致搜索请求的第一页数据与滚动加载的搜索条件不一致
    };
  },
  methods: {
    search() {
      this.pagenum = 1;
      this.fileList = [];
      this.cacheFilter = { filename: this.filename };
      this.getfilelist();
    },
    getfilelist() {
      fetchData(getfilelist, {
        ...this.cacheFilter,
        pagesize: 20,
        pagenum: this.pagenum,
      }).then((res) => {
        this.fileList = this.fileList.concat(res?.list || []);
        this.pages = res.pages;
      });
    },
    load() {
      if (this.pages && this.pagenum >= this.pages) return;
      this.pagenum++;
      this.getfilelist();
    },

    deleteFile(item) {
      fetchData(deletefile, { fileid: item.id }).then(() => {
        this.$message.success("删除成功!");
        this.pagenum = 1;
        this.fileList = [];
        this.search();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.dark-theme .file-list-container {
  .file-list .item {
    .icon-caozuo-gengduo {
      color: #fff;
    }
    &.active,
    &:hover {
      background-image: var(--color-primary);
    }
  }
}

.file-list-container {
  width: 300px;
  flex-shrink: 0;
  background-color: var(--translate-left-background);
  .file-list-head {
    display: flex;
    align-items: center;
    padding: 8px 0 0 18px;

    .el-input {
      width: 186px;
    }
    .iconfont {
      margin-left: 15px;
      font-size: 18px;
      cursor: pointer;
    }
  }
  .folder {
    padding: 13px 18px;
    span {
      margin: 0 20px 0 11px;
    }
  }
  .file-list {
    max-height: calc(100% - 100px);
    padding: 0 11px 0 5px;
    overflow-y: scroll;
    .item {
      position: relative;
      width: 272px;
      height: 40px;
      padding: 0 25px 0 17px;
      line-height: 40px;
      font-size: 14px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      box-sizing: border-box;
      border-radius: 2px;
      cursor: pointer;
      .icon-shanchu {
        position: absolute;
        right: 6px;
      }
      &.active,
      &:hover {
        color: #fff;
        background-color: var(--color-primary);
        .icon-shanchu {
          color: #fff;
        }
      }
    }
    .item + .item {
      margin-top: 1px;
    }
  }
}
</style>
